<template>
  <div>
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
    />
    <div class="lname">
      <div :class="['title',subscript==index?'on':'']" v-for="(item,index) in classarry" @click="switchfunc(item.code,index)" :key="index">{{item.name}}</div>
    </div>
    <div class="conner">
      <dl>
        <dd v-for="(item,index) in productlist" :key="index" @click="details(item.code)">
          <img class="pic" :src='"http://images.hongenkeji.cn/" + item.coverImage'/>
          <div class="infos">
            <h3>
              <span>次日达</span>
              {{item.name}}
            </h3>
            <p>{{item.goodsDesc}}</p>
            <div class="func">
              <div class="money">
                <em><i>￥</i>{{item.actualPrice}}</em>
                <del>￥{{item.originalPrice}}</del>
              </div>
              <div class="lei" @click.stop="shopcard($event,'http://images.hongenkeji.cn/' + item.coverImage)">
                <img src='~@/assets/gouwuche.png'/>
              </div>
            </div>
          </div>
        </dd>
      </dl>
    </div>
    <add-cart ref="cart"/>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { fenlei,proupts } from '@/api/app'
import { GoodsAction, GoodsActionIcon, GoodsActionButton,NavBar } from 'vant';
import addCart from '@/components/addCart.vue'
export default {
  data () {
    return {
      classarry: [],
      subscript: 0,
      productlist: [],
      pageNum: 1,
      showmore: false,
      code: null
    }
  },
  components: {
    [GoodsAction.name]:GoodsAction,
    [GoodsActionIcon.name]:GoodsActionIcon,
    [GoodsActionButton.name]:GoodsActionButton,
    [NavBar.name]:NavBar,
    addCart
  },
  mounted () {
    this.classlist()
    this.productlist = [] // 重新赋值
    this.pageNum = 1 // 重新赋值
  },
  computed: {
    ...mapState('app', ['codelist', 'prefix'])
  },
  methods: {
    ...mapMutations('app', ['codefunc']),
    classlist () {
      fenlei().then(({data}) => {
        this.classarry = data
      })
    },
    shopcard (el, picpath) { // 添加购物车
      this.$refs.cart.addGoods(el, picpath)
    },
    switchfunc (code, index) { // 切换产品
      this.productlist = [] // 重新赋值
      this.pageNum = 1 // 重新赋值
      this.subscript = index
      this.code = code
      this.product(code) // vuex
    },
    product (type = '') { // 产品
      proupts({type,pageNum:this.pageNum}).then(({data})=>{
        this.productlist.push(...data.list)
      })
    },
    details () { // 跳转产品详情
      // this.$router.push({
      //   path: '/pages/product/main',
      //   query: {
      //     id
      //   }
      // })
    }
  }
}
</script>
<style lang="stylus" scoped>
.lname
  width 26vw
  height 100vh
  background-color #F5F5F5
  position fixed
  left 0
  .title
    height 44px
    line-height 44px
    font-size 14px
    color #666666
    text-align center
    box-sizing border-box
    border-left 2px solid #ffffff
    &.on
      background-color #ffffff
      border-left 2px solid #FF9355
.conner
  min-height 100vh
  background-color #ffffff
  padding-left 26vw
  overflow hidden
dl
  width 74vw
  dd
    background-color #ffffff
    padding 0px 6px
    display flex
    justify-content space-between
    margin-bottom 10px
    .pic
      width 100px
      height 100px
      margin-right 10px
      border-radius 6px
    .infos
      width 290px
      display flex
      justify-content flex-start
      align-content space-between
      flex-wrap wrap
      h3
        color #333333
        font-size 14px
        line-height 1.5em
        width 100%
        span
          display inline-block
          width 44px
          height 16px
          background-color #FF9355
          border-radius 8px
          margin-right 6px
          color #ffffff
          font-size 12px
          text-align center
          line-height 16px
      p
        font-size 12px
        color #999999
        line-height 20px
        width 100%
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      .func
        display flex
        justify-content space-between
        align-items center
        width 100%
        .money
          display flex
          justify-content flex-start
          align-items center
          em
            font-size 16px
            color #E33636
            line-height 12px
            font-weight 500
            margin-right 7px
            display flex
            justify-content flex-start
            align-items center
            i
              font-size 12px
              color #E33636
              line-height 24px
          del
            font-size 12px
            color #666666
            font-weight 500
            text-decoration line-through
        .lei
          img
            width 20px
            height 20px
            margin-left 20px
            display flex
            justify-content center
            align-items center
</style>
